<template>
  <el-card class="box-card"
           shadow="never">
    <div class="oper-status"> {{titleName}} </div>
    <el-form ref="ruleForm"
             :model="ruleForm"
             :rules="rules"
             label-width="90px"
             class="demo-ruleForm">
      <el-row>
        <el-form-item label="目的城市"
                      prop="toAddress">
          <el-col :span="24">
            <!-- <area-select v-model="ruleForm.endCity"
                         :disabled="bargaDisable"
                         :area-values="ruleForm.endCity"
                         type="code"
                         placeholder="请选择目的城市"
                         check-strictly
                         @confirm="changeFrom" /> -->
            <area-cascader v-model="ruleForm.toAddress"
                           :disabled="bargaDisable"
                           :props="props"
                           :placeholder="`请选择目的城市`"
                           @input="changeFrom" />
          </el-col>
          <!-- <el-col :span="14">
            <el-input v-model="ruleForm.endAddress"
                      :disabled="endCityDisabled || bargaDisable"
                      placeholder="请输入详细地址" />
          </el-col> -->
        </el-form-item>
        <el-form-item prop="endAddress">
          <el-input v-model="ruleForm.endAddress"
                    :rows="2"
                    type="textarea"
                    :disabled="endCityDisabled || bargaDisable"
                    placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="计费单位"
                      prop="billingUnit">
          <el-select v-model="ruleForm.billingUnit"
                     :disabled="bargaDisable"
                     placeholder="请选择计费单位"
                     @input="handlerUnit">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-col :span="24">
          <div class="form-title">单位区间</div>
          <UnitValueComponent ref="unit"
                              :rows="ruleForm.pricingList"
                              v-bind="$attrs"
                              @verifyTableDataText="verifyTableDataText"
                              v-on="$listeners" />
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="数值区间"
                        prop="rangeValue">
            <input-number-range v-model="ruleForm.rangeValue"
                                :disabled="isDisabled"
                                :precision="num" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="24">
          <el-form-item label="价格"
                        prop="price">
            <el-input v-model="ruleForm.price"
                      placeholder="请输入价格">
            </el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">保存</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// import AreaSelect from "@basic/area/AreaSelect";
import AreaCascader from "@basic/area/AreaCascader.vue";
// import InputNumberRange from '../../../components/InputNumberRange.vue'
import UnitValueComponent from '../../transportComponent/components/UnitValueComponent.vue'
import { options } from '../../options'

// var valueVerify = (rule, value, callback) => {
//   if (!value) {
//     callback()
//   } else {
//     if (value[0] === null) {
//       return callback(new Error('请输入最小值'))
//     } else if (value[1] === null) {
//       return callback(new Error('请输入最大值'))
//     } else if (value.length === 2) {
//       if (value[0] > value[1]) {
//         return callback(new Error('最大值不能小于最小值 '))
//       } else {
//         callback()
//       }
//     } else {
//       callback()
//     }
//   }
// }

export default {
  name: 'AddDeliverForm',
  components: { AreaCascader, UnitValueComponent },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    editStatus: {
      type: Boolean,
      default: false
    },
    status: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
      ruleForm: {
        endAddress: ''
      },
      textPromptList: '',
      num: 0,
      isDisabled: false,
      endCityDisabled: true,
      rules: {
        toAddress: [{ required: true, message: '请选择目的城市', trigger: 'change' }],
        billingUnit: [{ required: true, message: '请选择计价单位', trigger: 'change' }],
        // rangeValue: [{ required: true, message: '请输入数值区间', trigger: 'blur' }, { validator: valueVerify, trigger: 'blur' }],
        // minValue: [{ required: true, message: '请输入最小值', trigger: 'blur' }],
        // maxValue: [{ required: true, message: '请输入最大值', trigger: 'blur' }],
        endAddress: [{ max: 100, message: '最多输入100个字符', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }, {
          pattern: /^(\d{0,7})(\.(\d{0,2}))?$/g,
          message: "只能输入7位整数，2位小数",
          trigger: "blur"
        }]
      },
      props: {
        label: 'name',
        value: 'areaCode',
        checkStrictly: true
      },
      options: options
    }
  },
  computed: {
    statuss () {
      return Number(this.status)
    },
    bargaDisable () {
      return this.statuss === 3 ? false : this.statuss ? true : false
    },
    titleName () {
      let title = this.editStatus ? '编辑' : (this.statuss && this.statuss !== 3 ? '议价' : '新增');
      return title
    }
  },
  watch: {
    value: {
      handler ({ row }) {
        const { toAddress } = row;
        this.endCityDisabled = !(toAddress?.districtCode);
        this.ruleForm = row
      }
    },
    editStatus: {
      handler (value) {
        this.headTitle = value
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    verifyTableDataText (data) {
      const text = data.filter(item => item.text)
      this.textPromptList = text
    },
    handlerUnit (value) {
      const items = options.find(item => item.value === value)
      this.$emit('handlerUnit', { value: value, items: items })
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const tableForm = this.$refs.unit.$refs.tableForm
          const tableFormValid = await tableForm.validate()
          if (tableFormValid && !this.textPromptList.length) {
            const modelData = tableForm.model.tableData
            const carryData = { ...this.ruleForm, pricingList: modelData }
            this.$emit('add', carryData)
          }
        } else {
          return false;
        }
      });
    },
    changeFrom (value) {
      this.ruleForm['toAddress'] = value
      // value.districtCode ? this.endCityDisabled = false : this.endCityDisabled = true
      if (value?.districtCode) {
        this.endCityDisabled = false
      } else {
        this.endCityDisabled = true
        this.ruleForm.endAddress = ''
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      // this.ruleForm.endAddress = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.form-title {
  padding-bottom: 18px;
  /* padding-left: 25px; */
}
.box-card {
  margin: 52px 0px 0px 10px;
}
.oper-status {
  padding: 0 0 10px 10px;
  font-weight: bold;
  border-bottom: 1px solid var(--prev-border-color-extra-grey);
  margin-bottom: 20px;
}
</style>